<template>
  <!-- view视图 -->
  <ul>
    <li class="item"><span>序号:</span>{{ obj.id }}</li>
    <li class="item"><span>学习科目:</span>{{ obj.subject }}</li>
    <li class="item"><span>学习内容:</span>{{ obj.content }}</li>
  </ul>
  <p>
    {{ message }}
  </p>
  <div v-text="message1"></div>
  <div v-html="htmlStr"></div>
  <!--用户名输入框的占位符文本属性placeholder绑定到Vue实例的username变量上-->
  <p><input type="text" v-bind:placeholder="username"></p>
  <!--密码输入框的占位符文本属性placeholder绑定到Vue实例的password变量上-->
  <p><input type="password" :placeholder="password"></p>
  <!--@click是一个点击事件指令，当用户点击button按钮时，
 Vue会调用当前Vue实例中定义的showInfo方法。-->
  <button @click="showInfo">输出信息</button>
  <button @click="show">点击按钮2</button>

  <!-- 使用 v-model 绑定 input 元素的 value 到 Vue 实例的 message 数据属性 -->  
  <input type="text" v-model="message" placeholder="请输入内容...">  
  <!-- 显示绑定的数据，以验证双向绑定是否工作 -->  
  <p>输入的内容是: {{ message2 }}</p>  
  <div>  
    <input type="text" v-model.number="n1" placeholder="请输入数值1"> 
    <span> + </span>
    <input type="text" v-model.number="n2" placeholder="请输入数值2"> 
    <span> = </span>
    <span> {{n1+n2}} </span>
  </div>  
   <input type="text" v-model.trim="username1" placeholder="输入用户名">  
  <div>  
    <p v-if="type === 'A'">优秀</p>  
    <p v-else-if="type === 'B'">良好</p>  
    <p v-else>合格</p>  
  </div>  
    <div>  
    <button @click="toggle">Toggle</button>  
    <p v-show="isVisible">这段文字会根据按钮的点击显示或隐藏。</p>  
  </div>  

      <ul>  
        <!-- 使用v-for循环渲染列表 -->  
        <li v-for="(item, index) in items" :key="index">  
          {{ item.text }}  
        </li>  
  </ul>  
</template>
<script setup>
import { ref } from "vue";
const obj = {
  id: "10001",
  subject: "Vue.js 前端实战开发",
  content: "学习Vue基础",
};
let message = ref("hello Vue");
setTimeout(() => {
  message.value = "你好,Vue3";
}, 3000);
const message1 = "<span>咬定青山不放松，立根原在破岩中</span>";
const htmlStr = "<strong>千磨万击还坚劲，任尔东西南北风</strong>";

  const username = '请输入用户名'
  const password = '请输入密码'
// 事件函数定义方式一：箭头函数
// const 函数名 = ([函数参数])=> {}
const showInfo = () => {
  console.log('欢迎来到Vue.js的世界！')
}
// 事件函数定义方式二：function 函数名([函数参数]){}
function show() {
   console.log('点击按钮2触发')
}

    let message2 = ''
let
n1 = ref(0)
n2 = ref(0)
let username1 = ref('请输入用户名') 
    let type = ref('A')


    let isVisible = true // 控制显示与隐藏  
    
    const toggle = () => {  
      isVisible.value = !isVisible.value; // 切换 isVisible 的值  
    }
    const items = [  
        { text: '项目1' },  
        { text: '项目2' },  
        { text: '项目3' }  
      ] 
      
</script>
<style scoped>



</style>